<template>
  <div>
    <el-badge
      :max="99"
      :value="uploadTaskNum"
      :hidden="uploadTaskFlag"
      class="item"
      type="danger"
      style="
        height: 18px;
        line-height: 18px;
        display: flex;
        align-items: center;
      "
    >
      <el-popover
        title="上传任务列表"
        placement="bottom-end"
        width="600"
        trigger="manual"
        :value="taskListViewFlag"
      >
        <div class="pan-upload-task-items-content">
          <el-table
            empty-text="暂无传输任务"
            :data="uploadTaskList"
            height="300px"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              header-align="center"
              label="文件名称"
              prop="filename"
              width="120"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="文件状态"
              width="120"
            >
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>状态: {{ scope.row.statusText }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-button
                      v-show="scope.row.status === fileStatus.WAITING.code"
                      size="mini"
                      icon="el-icon-watch"
                      circle
                    ></el-button>
                    <el-button
                      v-show="scope.row.status === fileStatus.PAUSE.code"
                      size="mini"
                      type="warning"
                      icon="el-icon-video-play"
                      circle
                    ></el-button>
                    <el-button
                      v-show="scope.row.status === fileStatus.UPLOADING.code"
                      size="mini"
                      type="success"
                      icon="el-icon-upload2"
                      circle
                    ></el-button>
                    <el-button
                      v-show="scope.row.status === fileStatus.FAIL.code"
                      size="mini"
                      type="danger"
                      icon="el-icon-error"
                      circle
                    ></el-button>
                    <el-button
                      v-show="scope.row.status === fileStatus.PARSING.code"
                      size="mini"
                      type="info"
                      icon="el-icon-loading"
                      circle
                    ></el-button>
                    <el-button
                      v-show="scope.row.status === fileStatus.MERGE.code"
                      size="mini"
                      type="primary"
                      icon="el-icon-cpu"
                      circle
                    ></el-button>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="上传进度"
              width="180"
            >
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>上传速度: {{ scope.row.speed }}</p>
                  <p>
                    上传大小: {{ scope.row.uploadedSize }}/{{
                      scope.row.fileSize
                    }}
                  </p>
                  <p>剩余时间: {{ scope.row.timeRemaining }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-progress
                      :stroke-width="13"
                      :color="colors"
                      :percentage="scope.row.percentage"
                    ></el-progress>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="操作"
              width="180"
            >
              <template slot-scope="scope">
                <el-tooltip
                  v-show="scope.row.status === fileStatus.UPLOADING.code"
                  class="item"
                  effect="light"
                  content="暂停上传"
                  placement="top"
                >
                  <el-button
                    @click="pauseUpload(scope.row.filename)"
                    size="mini"
                    type="info"
                    icon="el-icon-video-pause"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  v-show="scope.row.status === fileStatus.PAUSE.code"
                  class="item"
                  effect="light"
                  content="继续上传"
                  placement="top"
                >
                  <el-button
                    @click="resumeUpload(scope.row.filename)"
                    size="mini"
                    type="success"
                    icon="el-icon-video-play"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  v-show="
                    scope.row.status === fileStatus.UPLOADING.code ||
                    scope.row.status === fileStatus.WAITING.code ||
                    scope.row.status === fileStatus.PAUSE.code
                  "
                  class="item"
                  effect="light"
                  content="取消上传"
                  placement="top"
                >
                  <el-button
                    @click="cancelUpload(scope.row.filename)"
                    size="mini"
                    icon="el-icon-error"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  v-show="scope.row.status === fileStatus.FAIL.code"
                  class="item"
                  effect="light"
                  content="重新上传"
                  placement="top"
                >
                  <el-button
                    @click="retryUpload(scope.row.filename)"
                    size="mini"
                    type="warning"
                    icon="el-icon-refresh-right"
                    circle
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-button
          slot="reference"
          @click="changeTaskListView"
          type="text"
          icon="el-icon-sort"
        ></el-button>
      </el-popover>
    </el-badge>
  </div>
</template>

<script>
import panUtil from '../../utils/common'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'PanTaskList',
  data() {
    return {
      colors: [
        { color: '#909399', percentage: 30 },
        { color: '#e6a23c', percentage: 70 },
        { color: '#67c23a', percentage: 100 },
      ],
      fileStatus: panUtil.fileStatus,
    }
  },
  methods: {
    ...mapMutations({
      pauseTask: 'task/pause',
      resumeTask: 'task/resume',
      cancelTask: 'task/cancel',
      addTaskItem: 'task/add',
      retryTask: 'task/retry',
      changeTaskListView: 'task/changeViewFlag',
    }),
    pauseUpload(filename) {
      this.pauseTask(filename)
    },
    resumeUpload(filename) {
      this.resumeTask(filename)
    },
    cancelUpload(filename) {
      this.cancelTask(filename)
      this.$message.info('文件：' + filename + ' 取消上传')
    },
    retryUpload(filename) {
      this.retryTask(filename)
    },
  },
  computed: {
    ...mapGetters([
      'uploadTaskFlag',
      'uploadTaskNum',
      'uploadTaskList',
      'taskListViewFlag',
    ]),
  },
  mounted() {
    const taskItem = {
      filename: 'aaa',
    }
    // this.addTaskItem(taskItem)
    // this.addTaskItem(taskItem)
  },
  watch: {},
}
</script>

<style scoped>
.pan-upload-task-items-content {
  height: 300px;
}

.pan-upload-task-items-content .infinite-list {
  height: 100%;
  overflow: auto;
}

.el-badge.item {
  line-height: 38px;
}
:deep(.el-icon-sort) {
  font-size: 18px;
}
</style>
